/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/jsx-pascal-case */
/* eslint-disable jsx-a11y/alt-text */
import React from 'react'
import '@/assets/css/index.less'
import { ShoppingCartO } from '@react-vant/icons';
import Tab from '@/components/common/Tab.js'

const Home = () => {
    const [type, setType] = React.useState([])

    const [typeid, setTypeid] = React.useState(0)
    let navigate = React.$router.useNavigate()
    let LoginUser = React.$cookie.load('LoginUser') ? React.$cookie.load('LoginUser') : {}
    const [keyword, setKeyword] = React.useState('')

    const [CardList, setCardList] = React.useState([])

    React.useEffect(() => {
        GetType()
    }, [])

    React.useEffect(() => {
        GetCard()
    }, [typeid])

    const GetType = async () => {
        let result = await React.$api.TypeIndex()

        if (result.code === 1 && result.data) {
            result.data.unshift({
                name: '全部',
                id: 0
            })
            setType(result.data)
        }
    }
    const GetCard = async () => {
        let data = {
            typeid: typeid,
            userid: LoginUser.id
        }

        let result = await React.$api.CardIndex(data)

        if (result.code === 1 && result.data) {
            setCardList(result.data)
        }
    }
    const onSearch = async () => {
        let data = {
            typeid: typeid,
            userid: LoginUser.id,
            keyword: keyword
        }

        let result = await React.$api.CardIndex(data)

        if (result.code === 1 && result.data) {
            setCardList(result.data)
        }
    }
    const onTab = (values) => {
        setTypeid(values.name)
    }
    const onPay = (cardid) => {
        React.$vant.Dialog.confirm({
            title: '购买名片',
            message: '您是否购买该名片？'
        }).then(async () => {

            let data = {
                cardid: cardid,
                userid: LoginUser.id
            }
            let result = await React.$api.CardPay(data)
            if (result.code === 1) {
                React.$vant.Notify.show({
                    type: 'success',
                    message: result.msg,
                    onClose: () => {
                        navigate('/order/order/index')
                    }
                })
            } else {
                React.$vant.Notify.show({
                    type: 'warning',
                    message: result.msg
                })
            }
        })
            .catch(() => {
            })
    }
    const Item = () => {
        if (CardList.length > 0) {
            return (
                <div className="list">
                    {CardList.map(item => {
                        return (
                            <div className="item" key={item.id}>
                                <div className="content">
                                    <h3 className="title">
                                        <a href="ContactAdd.html">{item.nickname}</a>
                                    </h3>
                                    <div className="info">
                                        <div className="icon">
                                            <img src="/assets/images/info.png"></img>
                                        </div>
                                        <div className="desc">
                                            {item.content}
                                        </div>
                                    </div>
                                </div>
                                <div className="call icon" onClick={() => onPay(item.id)}>
                                    <React.$vant.Space >
                                        <ShoppingCartO fontSize="2em" color='#3bab5e' />
                                    </React.$vant.Space>
                                </div>
                            </div>
                        )
                    })}
                </div>
            )
        } else {
            return (
                <React.$vant.Empty description="暂无数据" />
            )
        }
    }

    return (
        <>
            {/* <!-- 搜索 --> */}
            <div className="search">
                <div className="box">
                    <div className="icon">
                        <span className="glyphicon glyphicon-search"></span>
                    </div>
                    <React.$vant.Input className="input" value={keyword} onChange={setKeyword} placeholder="请输入名字" />
                    <button className="btn" size="mini" type="default" onClick={onSearch}>搜索</button>
                </div>
            </div>
            {/* <!-- 分类 --> */}
            <div className="type wow fadeInUp">
                <React.$vant.Tabs active={typeid} color='#3bab5e' onClickTab={onTab} lineWidth='50'>
                    {type.map(item => (
                        <React.$vant.Tabs.TabPane name={item.id} key={item.id} title={item.name}>
                        </React.$vant.Tabs.TabPane>
                    ))}
                </React.$vant.Tabs>
            </div>
            {/* <!-- 列表 --> */}
            <div className="contact wow fadeInUp" data-wow-delay="100ms">
                <Item />
            </div>
            {/* 底部 */}
            <Tab />
        </>
    )
}

export default Home